/**
 * Created by caosh on 2018/5/13 0013.
 */
var StaffIndex = new Vue({
    el: '#staff-index',
    data: {
        empl: {
            'emplName': '',
            'loginName': '',
            'pwd': '',
            'roleId': ''
        },
        roleList: [],
        emplList: [],
        isShowSubjoin: false,
        isShowEdit: false
    },
    methods: {
        getEmplList: function () {
            var _this = this;
            _this.setRequestDatas();
            _this.ajaxOptions.url = '/getEmplList';
            _this.ajaxOptions.done = function(result, status, jqXHR) {
                _this.emplList = result.data;
            };

            _this.doAjax();
        },
        openEditEmpl: function (empl) {
            if (!this.isShowEdit && !this.isShowSubjoin) {
                this.empl = empl;
                this.empl.pwd = this.empl.pwd || '';
                this.isShowEdit = !this.isShowEdit
            }


            Vue.useLayerForm();
        },
        showSubjoin: function () {
            if (!this.isShowSubjoin && !this.isShowEdit) {
                this.empl = {
                    'emplName': '',
                    'loginName': '',
                    'pwd': '',
                    'roleId': ''
                };
                this.isShowSubjoin = !this.isShowSubjoin;
            }


            Vue.useLayerForm();
        },
        getRoleList: function () {
            var _this = this;
            _this.setRequestDatas();
            _this.ajaxOptions.url = '/getRoleList';
            _this.ajaxOptions.done = function(result, status, jqXHR) {
                _this.roleList = result.data;
            };

            _this.doAjax();
        },
        addEmpl: function (e) {
            var _this = this;

            if (!_this.checkEmpl('add')) {
                return;
            }

            _this.setRequestDatas(_this.empl);
            _this.ajaxOptions.url = '/addEmpl';
            _this.ajaxOptions.data = _this.requestDatas;
            _this.ajaxOptions.done = function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    console.log('保存成功！');
                    _this.isShowSubjoin = !_this.isShowSubjoin;
                } else {
                    console.log(result.errMsg);
                }
            };
            _this.doAjax();
        },
        editEmpl: function () {
            var _this = this;

            if (!_this.checkEmpl('edit')) {
                return;
            }

            _this.setRequestDatas(_this.empl);
            _this.ajaxOptions.url = '/editEmpl';
            _this.ajaxOptions.data = _this.requestDatas;
            _this.ajaxOptions.done = function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    console.log('保存成功！');
                    _this.isShowEdit = !_this.isShowEdit;
                } else {
                    console.log(result.errMsg);
                }
            };
            _this.doAjax();
        },
        checkEmpl: function (control) {
            var valid = true,
                classObj = this.status.empl[control];

            // 重置样式
            this.resetClassObj(classObj);

            if (this.empl.loginName.length == 0) {
                // classObj.loginName.isError = true;
                this.changeStatus(['empl', control, 'loginName'], 'isError');
                valid = false;
            }

            if (this.empl.emplName.length == 0) {
                this.changeStatus(['empl', control, 'emplName'], 'isError');
                // classObj.emplName.isError = true;
                valid = false;
            }

            if (this.empl.pwd.length < 6) {
                // classObj.pwd.isError = true;
                this.changeStatus(['empl', control, 'pwd'], 'isError');
                valid = false;
            }

            if (this.empl.roleId.length == 0) {
                // classObj.roleId.isError = true;
                this.changeStatus(['empl', control, 'roleId'], 'isError');
                valid = false;
            }

            return valid;
        },
        resetClassObj: function (classObj) {
            classObj.loginName = {
                isActive: false,
                isFinish: false,
                isError: false
            };

            classObj.emplName = {
                isActive: false,
                isFinish: false,
                isError: false
            };

            classObj.pwd = {
                isActive: false,
                isFinish: false,
                isError: false
            };

            classObj.roleId = {
                isActive: false,
                isFinish: false,
                isError: false
            };
        }
    },
    mixins: [AjaxMixin, StatusMixin, UserMixin],
    mounted: function () {
        Vue.useLayerElement();
        this.getEmplList();
        this.getRoleList();
    },
    watch: {
        'empl.loginName': function(val, oldVal) {
            if (val.length>12) {
                this.empl.loginName = val.substr(0, 12);
            }
        },
        'empl.emplName': function (val, oldVal) {
            if (val.length>20) {
                this.empl.emplName = val.substr(0, 20);
            }
        },
        'empl.pwd': function (val, oldVal) {
            if (val.length>20) {
                this.empl.pwd = val.substr(0, 20);
            }
        }
    }
});